<template>
   <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>

  <page-bg></page-bg>
  <u-navbar
      :safeAreaInsetTop="false"
      :placeholder="false"
      :is-back="true"
      :is-fixed="true"
      :title="$theme.title"
      :border-bottom="false"
      :title-bold="true"
      :title-color="'#111111'"
      :background="{ background : navBg }"
  >
  </u-navbar>
  <view class="page">
    <!-- 头部余额卡片 -->
    <view class="balance-card">
      <view class="card-header">
        <text class="balance-label">可提收益</text>
        <view class="balance-btn" @click="goToWithdraw">提现</view>
      </view>
      <view class="balance-amount">¥{{ balance }}</view>
    </view>

    <!-- 筛选栏 -->
    <view class="filter-bar">
      <picker mode="selector" :range="years" @change="onYearChange">
        <view class="filter-item">
          <text class="filter-text">{{ selectedYear || '年' }}</text>
          <text class="filter-arrow">∨</text>
        </view>
      </picker>
      
      <picker mode="selector" :range="months" @change="onMonthChange">
        <view class="filter-item">
          <text class="filter-text">{{ selectedMonth || '月' }}</text>
          <text class="filter-arrow">∨</text>
        </view>
      </picker>

      <view class="income-summary">
        <text class="income-label">收入：</text>
        <text class="income-amount">¥ {{ totalIncome }}</text>
      </view>
    </view>

    <!-- 收益记录列表 -->
    <view class="record-list">
      <view 
        v-for="(item, index) in recordList" 
        :key="index"
        class="record-item"
      >
        <view class="record-left">
          <view class="record-title">{{ item.title }}</view>
          <view class="record-time">{{ item.time }}</view>
        </view>
        <view class="record-right">
          <view class="record-amount">+{{ item.amount }}</view>
        </view>
      </view>

      <view v-if="recordList.length === 0" class="empty-state">
        <text class="empty-text">暂无收益记录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'WithdrawRecord',
  props:{
    module:{
      default:"",
      type:String,
      required:true
    }
  },
  data() {
    return {
      balance: '12235.22',
      years: ['2025', '2024', '2023'],
      selectedYear: '',
      months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      selectedMonth: '',
      totalIncome: '1235.11',
      recordList: [
        {
          id: 1,
          title: '30分钟图文畅聊——条娃娃鱼',
          time: '2025.12.12 12:11',
          amount: '12.33'
        },
        {
          id: 2,
          title: '30分钟语音畅聊——条娃娃鱼',
          time: '2025.12.12 12:11',
          amount: '11.22'
        },
        {
          id: 3,
          title: '30分钟图文畅聊——条娃娃鱼',
          time: '2025.12.12 12:11',
          amount: '12.33'
        },
        {
          id: 4,
          title: '30分钟语音畅聊——条娃娃鱼',
          time: '2025.12.12 12:11',
          amount: '11.22'
        },
        {
          id: 5,
          title: '30分钟图文畅聊——条娃娃鱼',
          time: '2025.12.12 12:11',
          amount: '12.33'
        },
        {
          id: 6,
          title: '30分钟语音畅聊——条娃娃鱼',
          time: '2025.12.12 12:11',
          amount: '11.22'
        },
        {
          id: 7,
          title: '30分钟语音畅聊——条娃娃鱼',
          time: '2025.12.12 12:11',
          amount: '11.22'
        }
      ]
    }
  },
  onLoad() {
    this.loadData()
  },
  onShow() {
    this.loadData()
  },
  methods: {
    loadData() {
      // 加载余额和收益记录
    },
    onYearChange(e) {
      this.selectedYear = this.years[e.detail.value]
      this.loadData()
    },
    onMonthChange(e) {
      this.selectedMonth = this.months[e.detail.value]
      this.loadData()
    },
    goToWithdraw() {
      uni.navigateTo({ 
        url: `/packages/pages/${this.module}/withdraw/apply`
      })
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, #ffe6f9 0%, #f5f5f5 30%);
}

/* 余额卡片 */
.balance-card {
  background: linear-gradient(135deg, #ff6cd7 0%, #ff2aa6 100%);
  margin: 20rpx;
  padding: 32rpx 28rpx;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(255, 42, 166, 0.3);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.balance-label {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
}

.balance-btn {
  padding: 12rpx 32rpx;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 32rpx;
  color: #fff;
  font-size: 26rpx;
  font-weight: 600;
  backdrop-filter: blur(10rpx);
}

.balance-amount {
  font-size: 72rpx;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2rpx;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  gap: 24rpx;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.filter-text {
  font-size: 28rpx;
  color: #999;
}

.filter-arrow {
  font-size: 20rpx;
  color: #999;
}

.income-summary {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.income-label {
  font-size: 28rpx;
  color: #999;
}

.income-amount {
  font-size: 28rpx;
  color: #ff2aa6;
  font-weight: 600;
}

/* 记录列表 */
.record-list {
  padding: 0 20rpx 20rpx;
}

.record-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 28rpx;
  margin-bottom: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.record-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.record-time {
  font-size: 24rpx;
  color: #999;
}

.record-right {
  display: flex;
  align-items: center;
}

.record-amount {
  font-size: 32rpx;
  font-weight: 700;
  color: #ff2aa6;
}

/* 空状态 */
.empty-state {
  padding: 120rpx 0;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
